<template>
  <div>
    <h1 class="tag-title text-center space-bottom">
      § {{ $page.category.title }}
    </h1>

    <div class="posts">
      <div
        class="post-card content-box"
        v-for="edge in $page.category.belongsTo.edges"
        :key="edge.node.id"
        :post="edge.node"
        :class="{ 'post-card--has-poster': edge.node.poster }"
      >
        <div class="post-card__header">
          <g-image
            alt="Cover image"
            v-if="edge.node.cover_image"
            class="post-card__image"
            :src="edge.node.cover_image"
          />
        </div>
        <div class="post-card__content">
          <h2 class="post-card__title" v-html="edge.node.title" />
          <p class="post-card__description" v-html="edge.node.description" />

          <PostMeta class="post-card__meta" :post="edge.node" />

          <g-link class="post-card__link" :to="edge.node.path">Link</g-link>
        </div>
      </div>
    </div>

    <transition name="fade">
      <div
        id="back-to-top"
        v-scroll-to="{ el: '#app' }"
        v-if="scrolledDist > 800"
      >
        <font-awesome id="back-to-top-icon" :icon="['fas', 'arrow-up']" />
      </div>
    </transition>
  </div>
</template>

<page-query>
query Category ($id: ID!) {
  category (id: $id) {
    title
    belongsTo {
      edges {
        node {
          ...on Post {
            title
            path
            cover_image (width: 1280, blur: 10)
            date (format: "MMMM D. YYYY")
            timeToRead
            cjkWordCount
            cjkReadTime
            description
            content
          }
        }
      }
    }
  }
}
</page-query>

<script>
import Author from '~/components/Author'
import PostMeta from '~/components/PostMeta'
export default {
  components: {
    Author,
    PostMeta,
  },
  metaInfo: {
    title: 'Category',
  },
}
</script>

<style lang="scss">
.post-card {
  margin-bottom: var(--space);
  position: relative;
  &__header {
    margin-left: calc(var(--space) * -1);
    margin-right: calc(var(--space) * -1);
    margin-bottom: calc(var(--space) / 2);
    margin-top: calc(var(--space) * -1);
    overflow: hidden;
    border-radius: var(--radius) var(--radius) 0 0;
    &:empty {
      display: none;
    }
  }
  &__image {
    min-width: 100%;
  }
  &__title {
    margin-top: 0;
  }
  &:hover {
    box-shadow: 0 0 6px rgba(0, 0, 0, 0.2);
  }
  &__link {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    overflow: hidden;
    text-indent: -9999px;
    z-index: 0;
  }
}

#back-to-top {
  position: fixed;
  bottom: 40px;
  right: 40px;
  z-index: 100;
  cursor: pointer;
}
#back-to-top-icon {
  font-size: 1.1em;
}
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s ease-in-out;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
